<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="css/reset.css" />
		<title></title>
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				position: relative;
				perspective: 1000px;
				-webkit-transform-style: preserve-3d;
				-moz-transform-style: preserve-3d;
				-ms-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			
			.wrap {
				width: 100%;
				height: 100%;
				background-image: url(img/beijing.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
			}
			
			@-webkit-keyframes miao1 {
				from {
					-webkit-transform: scale(2);
					top: 8%;
					right: -100%;
				}
				to {
					-webkit-transform: scale(1);
					top: 8%;
					right: 0%;
				}
			}
			
			#miao {
				height: 30%;
				width: 100%;
				position: absolute;
				top: 8%;
				right: -100%;
				-webkit-animation: "miao1" 1s 1s linear 1;
				-o-animation: "miao1" 1s 1s linear 1;
				animation: "miao1" 1s 1s linear 1;
				animation-fill-mode: forwards;
				display: block;
			}
			
			#miao img {
				width: 100%;
				height: 100%;
			}
			
			@-webkit-keyframes niyexiang1 {
				from {
					top: 37%;
					left: -100%;
				}
				to {
					top: 37%;
					left: 20%;
				}
			}
			
			#niyexiang {
				width: 80%;
				height: 5%;
				position: absolute;
				top: 37%;
				left: -100%;
				-webkit-animation: "niyexiang1" 1s 1s linear 1;
				-o-animation: "niyexiang1" 1s 1s linear 1;
				animation: "niyexiang1" 1s 1s linear 1;
				animation-fill-mode: forwards;
				/*right: 2%;*/
				display: block;
			}
			
			#niyexiang img {
				width: 100%;
				height: 100%;
			}
			
			@-webkit-keyframes ying1 {
				from {
					top: 30%;
					right: -100%;
				}
				to {
					top: 30%;
					right: 5%;
				}
			}
			#yingdizhonghai {
				width: 50%;
				height: 7%;
				position: absolute;
				top: 30%;
				/*right: 5%;*/
				right: -100%;
				-webkit-animation: "ying1" 2s 1s linear 1;
				-o-animation: "ying1" 2s 1s linear 1;
				animation: "ying1" 2s 1s linear 1;
				animation-fill-mode: forwards;
				display: block;
			}
			
			#yingdizhonghai img {
				width: 100%;
				height: 100%;
			}
			
			@-webkit-keyframes tiaozhan1{
				from{
					opacity: 0;
				}
				to{
					opacity: 1;
				}
			}
			#tiaozhan {
				opacity: 0;
				width: 80%;
				height: 8%;
				position: absolute;
				top: 70%;
				left: 10%;
				-webkit-animation: "tiaozhan1" 1s 1s linear 1;
				-o-animation: "tiaozhan1" 1s 1s linear 1;
				animation: "tiaozhan1" 1s 1s linear 1;
				animation-fill-mode: forwards;
				display: block;
			}
			
			#tiaozhan img {
				width: 100%;
				height: 100%;
			}
			
			#guize {
				opacity: 0;
				width: 25%;
				height: 2.5%;
				position: absolute;
				top: 80%;
				left: 40%;
				-webkit-animation: "tiaozhan1" 1.5s 1s linear 1;
				-o-animation: "tiaozhan1" 1.5s 1s linear 1;
				animation: "tiaozhan1" 1.5s 1s linear 1;
				animation-fill-mode: forwards;
				display: block;
			}
			
			#guize img {
				width: 100%;
				height: 100%;
			}
			#huodong{
				display: none;
				z-index: 1;
				position: absolute;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.8);
			}
			#lantu{
				position: absolute;
				top: 10%;
				left: 10%;
				width: 80%;
				height: 60%;
			}
			#lantu img{
				width: 100%;
				height: 100%;
			}
			#cha{
				position: absolute;
				top: 24%;
				right: 12%;
				width: 7%;
				height: 5%;
			}
			#cha img{
				width: 100%;
				height: 100%;
			}
			#dierye{
				display: none;
			}
			#xianchang{
				position: absolute;
				top: 40%;
				width: 90%;
				height: 50%;
				left: 5%;
			}
			#xianchang img{
				width: 100%;
				height: 100%;
			}
			#start1{
				width: 80%;
				height: 8%;
				position: absolute;
				top: 50%;
				left: 10%;
			}
			#start1 img{
				width: 100%;
				height: 100%;
			}
			
		</style>
	</head>

	<body>
		<div class="wrap">
			<div id="huodong">
				<div id="lantu">
					<img src="img/guize.png"/>
				</div>
				<div id="cha">
					<img src="img/cha.png"/>
				</div>
			</div>
			<div id="miao">
				<img src="img/logo1.png" />
			</div>
			<div id="yingdizhonghai">
				<img src="img/logo2.png" />
			</div>
			<div id="niyexiang">
				<img src="img/logo3.png" />
			</div>
			<div id="tiaozhan">
				<img src="img/start.png" />
			</div>
			<div id="guize">
				<img src="img/youxiguize.png" />
			</div>
			<div id="dierye">
				<div id="xianchang">
					<img src="img/jiemu.png"/>
				</div>
				<div id="start1">
					<a href="flycar.html"><img src="img/start.png"/></a>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#guize").on("click",function(){
			$("#huodong").css("display","block");
		});
		$("#cha").on("click",function(){
			$("#huodong").css("display","none");
		});
		$("#tiaozhan").on("click",function(){
			$(".wrap").css("background-image","url(img/beijing22.png)");
			$("#miao").css("display","none");
			$("#yingdizhonghai").css("display","none");
			$("#niyexiang").css("display","none");
			$("#tiaozhan").css("display","none");
			$("#guize").css("display","none");
			$("#dierye").css("display","block");
		})		
	</script>
</html>